<template>
  <div class="preview-container">
    <h1>账单预览</h1>
    <div v-if="bill" class="bill-details" ref="contentToConvert">
      <p>账单编号: {{ bill.id }}</p>
      <p>客户名称: {{ bill.customerName }}</p>
      <p>收支情况: {{ bill.balanceType }}</p>
      <p :class="{'green-text': bill.balanceType === '支出大于收入', 'red-text': bill.balanceType === '收入大于支出'}">
        收支金额: {{ bill.amount }}
      </p>
      <p>当月总支出: {{ bill.totalExpense }}</p>
      <p>当月总收入: {{ bill.totalIncome }}</p>
      <p>日期: {{ bill.date }}</p>
      <p>收支明细</p>
      <table>
        <thead>
        <tr>
          <th>项目</th>
          <th>金额 (元)</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(amount, project, index) in bill.projectBalances" :key="project" :class="{'even-row': index % 2 === 0}">
          <td>{{ project }}</td>
          <td :class="{'green-text': amount < 0, 'red-text': amount > 0}">
            {{ amount }}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="button-container">
      <el-button type="primary" size="medium" @click="goBack" class="back-button">返回</el-button>
      <el-button type="primary" size="medium" @click="generatePDF" class="download-button">生成PDF并下载</el-button>
    </div>
  </div>
</template>

<script>
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      bill: null,
    };
  },
  created() {
    // 从路由参数中获取账单数据
    this.bill = this.$route.params.bill;
  },
  methods: {
    async generatePDF() {
      const content = this.$refs.contentToConvert;

      // 使用 html2canvas 将 HTML 内容渲染为 canvas
      const canvas = await html2canvas(content, {
        scale: 2, // 提高分辨率
        logging: false, // 关闭日志输出
      });

      // 将 canvas 转换为图像
      const imgData = canvas.toDataURL('image/png');

      // 创建一个新的 jsPDF 实例
      const doc = new jsPDF('p', 'mm', 'a4');

      // 计算图像在 PDF 中的位置
      const imgProps = doc.getImageProperties(imgData);
      const pdfWidth = doc.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

      // 将图像添加到 PDF
      doc.addImage(imgData, 'PNG', 15, 15, pdfWidth - 30, pdfHeight * (pdfWidth - 30) / pdfWidth);

      // 保存 PDF
      doc.save(new Date().getTime() + '.pdf');
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.preview-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

h1 {
  text-align: center;
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

.bill-details {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

.bill-details p {
  margin: 10px 0;
}

.bill-details table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}

.bill-details th, .bill-details td {
  text-align: left;
  padding: 10px;
  border: 1px solid #ddd;
}

.bill-details th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.bill-details tr.even-row {
  background-color: #f9f9f9;
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.download-button, .back-button {
  width: 48%; /* 使按钮宽度相等 */
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.download-button:hover, .back-button:hover {
  background-color: #45a049;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}
</style>
